<template>
  <el-main id="ContentHome">
    <div class="condition" v-show="isEmp">
      <el-button type="primary" size="mini" @click.native="chartClick"
        >展开</el-button
      >

      <el-collapse-transition>
        <bar-chart v-show="isShow" />
      </el-collapse-transition>
    </div>

    <el-row>
      <el-input v-model="search" placeholder="输入关键字搜索">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-input v-model="id" size="id" placeholder="输入ID字搜索">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-switch v-model="browseType" active-text="全体记录" inactive-text="" />
      <el-button
        type="success"
        size="mini"
        icon="el-icon-upload2"
        @click="exportTable"
        >导出</el-button
      >
    </el-row>

    <!-- 非员工表 -->
    <el-table
      v-if="!isEmp"
      :data="tableDataCurrentPage"
      style="width: 100%"
      stripe
      border
      class="el-tables"
    >
      <el-table-column
        :prop="item"
        :label="item"
        v-for="(item, index) in titles"
        :key="index"
      />
      <!-- 操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row, scope)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 员工表 -->
    <el-table
      v-else
      :data="tableDataCurrentPage"
      style="width: 100%"
      stripe
      border
      class="el-tables"
    >
      <el-table-column
        :prop="item"
        :label="item"
        v-for="(item, index) in titles"
        :key="index * 10"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope)"
            >删除</el-button
          > -->
          <span @click="handleEdit(scope.$index, scope.row, scope)">编辑</span>
          <span @click="handleDelete(scope.$index, scope)"> / 删除</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页按钮 -->
    <el-pagination
      background
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="tableDataFilter.length"
      @current-change="pagerClick"
    />
    <!-- SQL更新组件 -->
    <table-update
      v-if="showUpadte"
      :rowData="updateData[0]"
      :tableName="tableName"
      @updateOver="showUpadte = !showUpadte"
    />
  </el-main>
</template>

<script>
import BarChart from 'components/content/echarts/BarChart'
import TableUpdate from 'components/content/TableUpdate'

import { UpdateData } from 'network/home'
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  name: 'ContentHome',
  components: {
    BarChart,
    TableUpdate
  },

  data() {
    return {
      search: '',
      id: '',
      browseType: true,
      preVal: {},
      pageIndex: 1,
      pageSize: 2,
      isShow: true,
      showUpadte: false,
      updateData: []
    }
  },

  props: {
    isEmp: {
      type: Boolean,
      default() {
        return false
      }
    },

    tableData: {
      type: Array,
      default() {
        return []
      }
    },

    tableName: {
      type: String,
      default() {
        return ''
      }
    }
  },

  computed: {
    titles() {
      return this.tableData.length !== 0 && Object.keys(this.tableData[0])
    },
    tableDataCut() {
      return this.tableData.slice(
        0,
        this.browseType ? this.tableData.length : 1
      )
    },

    tableDataFilter() {
      return this.tableDataCut.filter(
        item =>
          (!this.id || item.id.toString() == this.id) &&
          (!this.search ||
            item.name.toLowerCase().includes(this.search.toLowerCase()) ||
            item.id_card.toString().includes(this.search))
      )
    },

    tableDataCurrentPage() {
      let index =
        this.tableDataFilter.length !== 1
          ? (this.pageIndex - 1) * this.pageSize
          : 0
      let pageCount =
        this.pageSize > this.tableDataFilter.length
          ? this.tableDataFilter.length
          : this.pageSize
      // console.log('index:' + index)
      // console.log('pageCount:' + pageCount)
      return this.tableDataFilter.slice(index, index + pageCount)
    }
  },

  methods: {
    /**
     *
     * 事件响应
     */
    exportTable() {
      console.log('expport')
      let wb = XLSX.utils.table_to_book(document.querySelector('.el-tables'))

      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })

      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          'sheetjs.xlsx'
        )
      } catch (e) {
        console.log(e)
      }
      return wbout
    },

    pagerClick(currentPage) {
      this.pageIndex = currentPage
    },

    chartClick() {
      this.isShow = !this.isShow
    },

    handleEdit(index, row, scope) {
      console.log(row)
      console.log(scope)
      this.updateData.splice(0, 1, row)
      this.showUpadte = !this.showUpadte
    },

    handleDelete(index, scope) {
      Object.assign(this.preVal, scope.row)
      // this.tableDataCurrentPage.splice(index, 1)
      this._DeleteData(scope.row).then(res => {
        console.log(res)
        if (res.data.result == true) {
          this.$notify({
            type: 'success',
            title: '成功',
            message: '记录更新成功'
          })
          this.tableDataCurrentPage.splice(index, 1)
        } else {
          this.$notify({
            type: 'error',
            title: '失败',
            message: '记录更新失败'
          })
          Object.assign(scope.row, this.preVal)
        }
      })
    },

    /**
     * 请求数据
     */
    _DeleteData(data) {
      let obj = { sqlType: 'delete', tableName: this.tableName }
      Object.assign(obj, data)
      console.log(obj)
      return UpdateData(obj)
    }
  }
}
</script>

<style scoped>
.condition {
  /* height: 200px; */
  margin-bottom: 20px;
}

.el-row {
  width: 100%;
  background-color: #eee;
  position: relative;
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  margin-bottom: 10px;
}
.el-row >>> .el-input {
  width: 200px;
  height: 100%;
  margin: 0 10px 0 10px;
}

.el-row >>> .el-switch {
  margin: 0 15px 0 0;
}

.el-pagination {
  margin: 20px 0 0 0;
}
span {
  font-weight: bold;
  color: coral;
}
</style>
